<template>
  <div class="chart-base-option">
      <el-collapse-item name="1" title="容器" v-if="hasGrid">
        <div class="group">
          <div class="group-label">边距</div>
          <div class="group-content">
            <el-form-item label="左边距">
              <el-input v-model="attribute.grid.left" />
            </el-form-item>
            <el-form-item label="右边距">
              <el-input v-model="attribute.grid.right" />
            </el-form-item>
            <el-form-item label="上边距">
              <el-input v-model="attribute.grid.top" />
            </el-form-item>
            <el-form-item label="下边距">
              <el-input v-model="attribute.grid.bottom" />
            </el-form-item>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="颜色" v-if="hasColor">
        <el-form-item label="单色">
          <tm-colors v-model="attribute.color"/>
        </el-form-item>
        <el-form-item label="渐变颜色">
          <el-form-item label="">
            <el-switch v-model="attribute.colorRange.show"></el-switch>
          </el-form-item>
          <tm-color-list v-if="attribute.colorRange.show" v-model="attribute.colorRange.colors"/>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item  title="图例" v-if="hasLegend">
        <el-form-item label="显示">
          <el-switch v-model="attribute.legend.show" />
        </el-form-item>
        <div v-show="attribute.legend.show">
          <el-form-item label="方向">
            <tm-radio v-model="attribute.legend.orient" :data="orientList"/>
          </el-form-item>
          <el-form-item label="水平位置">
            <tm-radio v-model="attribute.legend.left" :data="leftList"/>
          </el-form-item>
          <el-form-item label="垂直位置">
            <tm-radio v-model="attribute.legend.top" :data="topList"/>
          </el-form-item>
          <div class="group">
            <div class="group-label">文字</div>
            <div class="group-content">
              <el-form-item label="字体大小" >
                <el-input-number v-model="attribute.legend.textStyle.fontSize" style="width: 100%"/>
              </el-form-item>
              <el-form-item label="字体颜色">
                <el-color-picker v-model="attribute.legend.textStyle.color" show-alpha/>
              </el-form-item>
            </div>
          </div>
          <div class="group" >
            <div class="group-label">图例项</div>
            <div class="group-content">
              <el-form-item label="宽" >
                <el-input-number v-model="attribute.legend.itemWidth" style="width: 100%"/>
              </el-form-item>
              <el-form-item label="高" >
                <el-input-number v-model="attribute.legend.itemHeight" style="width: 100%"/>
              </el-form-item>
              <el-form-item label="间距" >
                <el-input-number v-model="attribute.legend.itemGap" style="width: 100%"/>
              </el-form-item>
              <el-form-item label="形状" >
                <tm-select v-model="attribute.legend.icon" :data="iconList"></tm-select>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="提示" v-if="hasTooltip">
        <el-form-item label="显示">
          <el-switch v-model="attribute.tooltip.show"></el-switch>
        </el-form-item>
        <el-form-item label="触发类型">
          <tm-radio v-model="attribute.tooltip.trigger" :data="triggerList"></tm-radio>
        </el-form-item>
        <el-form-item label="格式">
          <el-input v-model="attribute.tooltip.formatter" clearable />
        </el-form-item>
      </el-collapse-item>
  </div>
</template>

<script>
import tmRadio from '@/package/components/tm-radio'
import tmSelect from '@/package/components/tm-select'
import tmColorList from "@/package/components/tm-color-range/tm-color-list";
import tmColors from "@/package/components/tm-colors";

export default {
  name: 'chart-base-option',
  cnName: '图表基本配置',
  components: {
    tmRadio,
    tmSelect,
    tmColorList,
    tmColors
  },
  props: {
    attribute: Object,
    hasGrid: { // 容器
      type: Boolean,
      default: true
    },
    hasColor: { // 显示颜色
      type: Boolean,
      default: true
    },
    hasLegend: { // 显示图例
      type: Boolean,
      default: true
    },
    hasTooltip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      leftList: [
        {label: '靠左', value: 'left'},
        {label: '居中', value: 'center'},
        {label: '靠右', value: 'right'}
      ],
      topList: [
        {label: '顶部', value: 'top'},
        {label: '中间', value: 'middle'},
        {label: '底部', value: 'bottom'}
      ],
      orientList: [
        {label: '水平', value: 'horizontal'},
        {label: '垂直', value: 'vertical'}
      ],
      iconList: [
        {label: 'circle', value: 'circle'},
        {label: 'rect', value: 'rect'},
        {label: 'roundRect', value: 'roundRect'},
        {label: 'triangle', value: 'triangle'},
        {label: 'diamond', value: 'diamond'},
        {label: 'pin', value: 'pin'},
        {label: 'arrow', value: 'arrow'},
        {label: 'none', value: 'none'}
      ],
      triggerList: [
        {label: 'none', value: 'none'},
        {label: 'axis', value: 'axis'},
        {label: 'item', value: 'item'}
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.chart-base-option {
}
</style>
